// 1️⃣ 引入 async-validator，async-validator 提供了一个构造函数
import Schema from 'async-validator'
import {
  reqGetAddressDetail,
  reqSaveUserAddress,
} from '../../../api/address'

Page({
  // 页面的初始数据
  data: {
    name: '',
    phone: '',
    provinceName: '',
    provinceCode: '',
    cityName: '',
    cityCode: '',
    districtName: '',
    districtCode: '',
    address: '',
    fullAddress: '',
    isDefault: 0,
    regionList: [],
    id: ''
  },
  onLoad(option) {
    option.id && this.getAddressDetail(option.id)
  },
  // 编辑时获取地址详情数据
  async getAddressDetail(id) {
    const {
      code,
      data
    } = await reqGetAddressDetail(id)
    if (code === 200) {
      this.setData({
        name: data.name,
        phone: data.phone,
        address: data.address,
        provinceName: data.provinceName,
        provinceCode: data.provinceCode,
        cityName: data.cityName,
        cityCode: data.cityCode,
        districtName: data.districtName,
        districtCode: data.districtCode,
        fullAddress: data.fullAddress,
        isDefault: data.isDefault,
        regionList: [data.provinceName, data.cityName, data.districtName],
        id: data.id
      })
    }
  },
  // 保存地址信息
  async saveUserAddress(req) {
    const {
      code,
      message
    } = await reqSaveUserAddress(req)
    if (code === 200) {
      wx.flowerTipToast({
        title: message,
        icon: 'success'
      })
      setTimeout(() => {
        wx.navigateBack()
      }, 500)

    }
  },
  // 保存收货地址
  async saveAddrssForm() {
    const reqParams = {
      ...this.data,
      fullAddress: this.data.fullAddress + this.data.address
    }
    delete reqParams.regionList
    console.log(reqParams, 'reqParams');
    // 验证表单
    const {
      valid
    } = await this.onValidate(reqParams)
    if (!valid) return
    // 验证通过保存表单信息
    this.saveUserAddress(reqParams)
  },

  // 省市区选择
  onAddressChange(event) {
    const {
      code,
      value
    } = event.detail
    this.setData({
      provinceName: value[0],
      cityName: value[1],
      districtName: value[2],
      provinceCode: code[0],
      cityCode: code[1],
      districtCode: code[2],
      regionList: value,
      fullAddress: value[0] + value[1] + value[2] + this.data.address
    })
  },
  // 设置是否为默认地址
  switchChange(event) {
    const {
      value
    } = event.detail
    this.setData({
      isDefault: value ? 1 : 0
    })
  },
  // 验证收货地址表单数据
  onValidate(params) {
    // 验证收货人，是否只包含大小写字母、数字和中文字符
    const nameRegExp = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$'

    // 验证手机号，是否符合中国大陆手机号码的格式
    const phoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$'
    // 创建表单验证规则
    const rules = {
      // key 建议和 需要验证的数据字段名字保持一致
      name: [
        // required 是否是必填项
        {
          required: true,
          message: '收货人不能为空'
        },
        // 正则表达式
        {
          pattern: nameRegExp,
          message: '收货人姓名不合法'
        }
      ],
      phone: [
        // required 是否是必填项
        {
          required: true,
          message: '手机号码不能为空'
        },
        // 正则表达式
        {
          pattern: phoneReg,
          message: '手机号码不合法'
        }
      ],
      provinceName: [{
        required: true,
        message: '请选择收货人所在地区'
      }],
      address: [{
        required: true,
        message: "请输入详细的地址"
      }]
    }

    // 4️⃣创建表单验证实例
    // 在创建实例时需要传入验证规则
    const validator = new Schema(rules)

    // 5️⃣ 调用 validate 实例方法对数据进行验证
    // validate 方法接收一个对象作为参数，对象是需要验证的数据
    // 注意：validate 方法只会验证和验证规则同名的属性

    return new Promise(resolve => {
      validator.validate(params, (errors) => {
        // 如果验证失败，errors 是所有错误的数组
        // 如果验证成功，errors 是 null
        if (errors) {
          wx.flowerTipToast({
            title: errors[0].message,
            icon: 'error'
          })
          resolve({
            valid: false
          })
        } else {
          resolve({
            valid: true
          })
        }

      })
    })
  }
})